<template>
	<view class="swiper,index">
		<!--轮播-->
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in background">
				<!--v-for是vue中的用法，绑定  item绑定的是background-->
				<view class="swiper-item uni-bg-red">
					<image :src="item" mode="" class="swiper-img"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!--搜索-->
		<view class="uni-form-item uni-column">
			<input class="uni-input" focus placeholder="搜索美食" />
		</view>
		
	<!--宫格-普通用法-->
	<!--	<view class="gird">
			<view class="gird-item" v-for="item in arr">
				<image src="../../static/images/5.png" mode=""></image>
				<view class="gird-item-text">
					餐饮
				</view>
			</view>
			
			<view class="gird-item">
				<image src="../../static/images/4.png" mode=""></image>
				<view class="gird-item-text">
					餐饮
				</view>
			</view>
			
			<view class="gird-item">
				<image src="../../static/images/6.png" mode=""></image>
				<view class="gird-item-text">
					餐饮
				</view>
			</view>
			
			<view class="gird-item">
				<image src="../../static/images/7.png" mode=""></image>
				<view class="gird-item-text">
					餐饮
				</view>
			</view>
		</view>
	-->
		
		<!--宫格   v-for用法-->
		<view class="gird">
			<view class="gird-item" v-for="item in arr">
				<image :src="item.imgurl" mode=""></image>
				<view class="gird-item-text">
					{{item.title}}
				</view>
			</view>
		</view>
							
		<view class="img-o">
			<image src="../../static/image/images/8.png" mode="" class="img-one"></image>
		</view>
		
		<!--优选名厨-->
		<view class="cooker">
			<view>
				<view class="gdmc">更多名厨</view>
				<image src="../../static/image/images/9.png" mode="" class="cooker-one"></image>
			</view>
			<scroll-view class="main" scroll-x="true" enable-flex="true">
				<Cooker class="item" v-for="item in chef" :cook="item">
				</Cooker>
			</scroll-view>
		</view>
		
		<!--更多名厨-->
		<view class="cooker">
			<view>
				<image src="../../static/image/images/10.png" mode="" class="cooker-two"></image>
			</view>
			<scroll-view class="main-two" scroll-x="true" enable-flex="true">
				<view class="item-two" v-for="item in cheftwo" :cook="item">
					<image :src="item.imgurl" mode="" class="item-two"></image>
					<view class="">
						{{item.title}}
					</view>
					<view class="price">
						￥{{item.price}}元/桌
					</view>
				</view>
			</scroll-view>
			<view class="gdcy">更多餐宴</view>
		</view>
		
		<!--宫格2-->
		<view class="gire2">
			<view class="gire2-item" v-for="item in arr2">
				<image :src="item.imgurl" mode="" class="gire2-img"></image>
				<view class="">{{item.title}}</view>
				<view class="">{{item.text}}</view>
			</view>
		</view>
		<!--图片-->
		<view class="boming">
			<image src="../../static/image/images/gg.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	import Cooker from "../../components/Cook-item.vue"
	export default {
		components:{
			Cooker
		},
	    data() {
	        return {
				value:"5",
	            background: ['../../static/image/images/goods3.jpg', '../../static/image/images/goods2.jpg', '../../static/image/images/goods1.jpg'],
	            indicatorDots: true,
	            autoplay: true,//自动播放
	            interval: 2000,//间隔
	            duration: 500,//时长
				
				//宫格v-for用法
				arr:[
					{id:0,imgurl:"../../static/image/images/5.png",title:"餐饮"},
					{id:1,imgurl:"../../static/image/images/4.png",title:"餐饮"},
					{id:2,imgurl:"../../static/image/images/6.png",title:"餐饮"},
					{id:3,imgurl:"../../static/image/images/7.png",title:"餐饮"},	
				],
				chef:[
					{imgurl:"../static/image/images/man1.jpg",title:"冲子哥1",value:"3"},
					{imgurl:"../static/image/images/man2.jpg",title:"封子哥2",value:"5"},
					{imgurl:"../static/image/images/man3.jpg",title:"冲子哥3",value:"4"},
				],
				cheftwo:[
					{imgurl:"../../static/image/images/goods1.jpg",title:"牛肉面",price:"180"},
					{imgurl:"../../static/image/images/goods2.jpg",title:"鸡蛋羹",price:"180"},
					{imgurl:"../../static/image/images/goods3.jpg",title:"蟹饭",price:"180"},
					// {imgurl:"../../static/image/images/goods4.jpg",title:"小龙虾",price:"180"},	
				],
				//宫格2
				arr2:[
					{imgurl:"../../static/image/images/13.png",title:'诚信第一',text:'111111'},
					{imgurl:"../../static/image/images/14.png",title:'时间保证',text:'222222'},
					{imgurl:"../../static/image/images/15.png",title:'质量保证',text:'333333'},
					{imgurl:"../../static/image/images/16.png",title:'服务到位',text:'444444'},
				]
	        }
	    },
	   
		methods: {
				onChange(e) {
					console.log('rate发生改变:' + JSON.stringify(e))
				}
			}
	}
</script>

<style>
	
	.index{
		background-color: #fff;
		height: 1500px;
	}
	.swiper-img{
		width: 100%;
	}
	.uni-input{
		left: 30px;
		top: 128px;
		background-color: #FFF;
		position: absolute;
		border-radius: 50px;
		text-align: center;
		/* border: 1px solid blue; */
		width: 80%;
		height: 40px;
		box-shadow: 0px 0px 2px 1px #676664;
	}
	.gird-item image{
		position: relative;
		width: 60px;
		height: 60px;
		margin-top: 60px;
	}
	.gird,.gird-item-text{
		display: flex;
		justify-content: space-around;
	}
	.img-o{
		width: 100%;
		margin: 0 auto;
		margin-top: 20px;
	}
	.img-one{
		width: 100%;
		height: 130px;
	}
	.cooker{
		width: 80%;
		margin-top: 30px;
	}
	.cooker-one{
		width: 100%;
		height: 50px;
		margin-left: 12%;
	}
	.cooker-two{
		width: 100%;
		height: 20px;
		margin-left: 12%;
		margin-top: 30px;
	}
	.main{
		margin-left: 35px;
		display: flex;
		height:345rpx;
	}
	.main-two{
		margin-left: 35px;
		display: flex;
		height: 345rpx;
	}
	.gdmc{
		margin-left: 40%;
		color: #999999;
		position:absolute;
		margin-top: 210px;
	}
	.gdcy{
		margin-left: 40%;
		color: #999999;
		position:absolute;
		margin-top: 10px;
	}
	.item{
		padding: 0 5px 0 0;
		width: 200px;
		height: 100px;
		box-shadow: 0px 0px 1px 0px #C0C0C0;
		text-align: center;
	}
	.item-two{
		padding: 0 5px 0 0;
		width: 200px;
		height: 100px;
		box-shadow: 0px 0px 1px 0px #007AFF;
		text-align: center;
	}
	.more{
		width: 100px;
		margin-left: 25rpx;
		height: 35px;
		color: #007AFF;
	}
	.gire2{
		display: flex;
		flex-wrap: wrap;
		margin-top: 70px;
	}
	.gire2-item{
		width: 50%;
		text-align: center;
	}
	.gire2-img{
		width: 50px;
		height: 50px;
	}
	.boming image{
		width: 100%;
		height: 130px;
		margin-top: 20px;
	}
</style>
